﻿@{
    ViewBag.Title = "NegativeColumnChart";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>NegativeColumnChart</h2>

<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'column'
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            tooltip: {
                formatter: function () {
                    return '' +
                        this.series.name + ': ' + this.y + '';
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, -2, -3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, -2, 5]
                }]
        });
    });
</script>
